{% extends 'base/front_base.html' %}

{% block title %}
    视频资源
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/video/video_index.min.css' %}">
{% endblock %}

{% block main %}
    <div class="main">
    <div class="video-nav">
            <div class="nav-container">
                <h3 class="title">视频资源</h3>
                <ul class="nav-list">
                    <li class="active"><a href="#">cpp</a></li>
                    <li><a href="#">unity</a></li>
                    <li><a href="#">mysql</a></li>
                </ul>
            </div>
        </div>
    <div class="wrapper">
        <ul class="video-list">
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="pay">100积分</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="thumbnail-group">
                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg" alt="">
                    </div>
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <p class="author">云泥</p>
                        <p class="price-group">
                            <span class="free">免费</span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
{% endblock %}
